<template>
  <div class="dashboard-editor-container">
    <el-row class="chart-wrapper">
      <qualification :selJobWantedEduList="selJobWantedEduList" />
    </el-row>
    <el-row class="chart-wrapper">
      <age :selJobWantedAgeList="selJobWantedAgeList"/>
    </el-row>
    <el-row class="chart-wrapper">
      <WorkExperience :selJobWantedExpList="selJobWantedExpList"/>
    </el-row>
    <el-row class="chart-wrapper">
      <JobCategory :selJobWantedJobList="selJobWantedJobList"/>
    </el-row>
  </div>
</template>

<script>
import qualification from "./components/qualification";
import age from "./components/age";
import WorkExperience from "./components/WorkExperience";
import JobCategory from "./components/JobCategory";
import {
  selJobWantedEduApi,
  selJobWantedAgeApi,
  selJobWantedExpApi,
  selJobWantedJobApi,
} from "@/api/portrait";
export default {
  components: {
    qualification,
    age,
    WorkExperience,
    JobCategory,
  },
  data() {
    return {
      selJobWantedEduList: [],
      selJobWantedAgeList: [],
      selJobWantedExpList: [],
      selJobWantedJobList: [],
    };
  },
  created() {
    this.selJobWantedEdu();
    this.selJobWantedAge();
    this.selJobWantedExp();
    this.selJobWantedJob();
  },
  methods: {
    // 职位学历性别分布
    async selJobWantedEdu() {
      const res = await selJobWantedEduApi();
      const higherEducation = res.data.filter(
        (item) => item.type === "硕士" || item.type === "博士后"
      );
      res.data = res.data.filter(
        (item) => item.type !== "硕士" && item.type !== "博士后"
      );
      res.data.push(...higherEducation);
      // console.log(res.data);
      this.selJobWantedEduList = res.data;
    },
    // 年龄段性别分别
    async selJobWantedAge() {
      const res = await selJobWantedAgeApi();
      console.log(res);
      this.selJobWantedAgeList = res.data;
    },
    // 工作经验性别分布
    async selJobWantedExp() {
      const res = await selJobWantedExpApi();
      console.log(res);
      this.selJobWantedExpList = res.data;
    },
    // 职位类别性别分布
    async selJobWantedJob() {
      const res = await selJobWantedJobApi();
      console.log(res);
      this.selJobWantedJobList = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #fcfcfc;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 20px;
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
